<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车的页面</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#container{
				width: 980px;
				height: 1000px;
				margin: 0 auto;/*0表示上下auto左右的边距*/
			}
			#car {
				float: right;
			}
			#car ul li {
				list-style: none;
				float: left;
			}
			/*链接的字体和颜色、下划线*/
			#car ul li a {
				font-size: 12px;
				color: #333333;
				text-decoration: none;
				display: inline-block;
				width: 28px;
				height: 28px;
				line-height: 28px;
				text-align: center;
			}
			#car ul li a.text{
				width: 54px;
			}
			#car ul li a.pic{
				background: url(.D:\大实训\big-practical-training\web123\img) no-repeat 0px 0px;
			}
			#car ul li a.pic2{
				background-position: -44px 0px;
			}
			#car ul li a.pic3{
				background-position: -84px 0px;
			}
			#car ul li a.pic4{
				background-position: -126px 0px;
			}
			/* 10 */
			#car ul li a.pic5{
				background-position: 1px -25px;
				width: 48px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="car">
				<ul>
					<li><a href="#" class="pic"></a></li>
					<li><a href="#" class="text">购物车</a></li>
					<li><a href="#" class="pic pic2"></a></li>
					<li><a href="#"  class="text">帮助中心</a></li>
					<li><a href="#" class="pic pic3"></a></li>
					<li><a href="#"  class="text">加入收藏</a></li>
					<li><a href="#" class="pic pic4"></a></li>
					<li><a href="#"  class="text">设为首页</a></li>
					<li><a href="#" class="pic pic5">注册</a></li>
					<li><a href="#" class="pic pic5">登录</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>